import { Button, Checkbox } from 'antd'
import { CheckboxChangeEvent } from 'antd/es/checkbox'
import cs from 'classnames'
import Image from 'next/image'
import { useContext, useEffect, useState } from 'react'

import dialog from '@/assets/images/dialog-mobile.png'
import { GlobalContext } from '@/context'
import useLocale from '@/utils/useLocale'
import useSession from '@/utils/useSession'

import locale from './locale/index'
import style from './style/index.module.less'

function HomeDialogMobile({
  visible,
  onVisible,
  onContinue,
}: {
  visible: boolean
  onVisible: (_: boolean) => void
  onContinue: (_: boolean) => void
}) {
  const t = useLocale(locale)
  const [checkedSession, setCheckedSession] = useSession('HomeDiakogChecked', 'false')
  const [checked, setChecked] = useState<boolean>(false)
  const onChange = (e: CheckboxChangeEvent) => {
    setChecked(e.target.checked)
  }
  useEffect(() => {
    setChecked(JSON.parse(checkedSession))
  }, [])
  useEffect(() => {
    setCheckedSession(JSON.stringify(checked))
  }, [checked])

  const { lang } = useContext(GlobalContext)

  return (
    <div
      className={cs(
        'flex justify-center items-center bg-black bg-opacity-20 fixed top-0 left-0 z-[3001] w-screen h-screen',
        visible ? ' inline-block' : style['hide-animation']
      )}
    >
      <div
        className={cs(
          style['content'],
          'flex flex-col justify-center items-center py-8 px-4',
          visible ? style['animated'] : style['animated-div']
        )}
      >
        <Image className={cs('w-[80px] h-auto')} src={dialog} alt="logo Logo" priority />
        <div className={cs('text-[28px] font-normal Roboto pt-8 text-center px-4 leading-tight')}>
          {t.title}
        </div>
        <div
          className={cs(
            'text-[6] font-norma pb-[32px] pt-[24px] px-8 flex items-center justify-center',
            style['desc']
          )}
        >
          <Checkbox checked={checked} onChange={onChange}>
            <span className="text-center leading-6">{t.desc}</span>
          </Checkbox>
        </div>
        <div className={cs('flex justify-center')}>
          <Button
            type="primary"
            ghost
            className={cs(style['cancel'])}
            onClick={() => onVisible(false)}
          >
            <span className="Roboto">{t.cancel}</span>
          </Button>
          <div className="w-[20px] h-full"></div>
          <Button
            type="primary"
            disabled={!checked}
            className={cs(style['continue'])}
            onClick={() => onContinue(false)}
          >
            <span className="Roboto">{t.continue}</span>
            <div className="w-[20px] h-full"></div>
            <Image
              src="/arrow1.svg"
              alt="logo Logo"
              width={16}
              height={16}
              priority
              className={cs(lang === 'en-US' ? '' : style['rtl-img'])}
            />
          </Button>
        </div>
      </div>
    </div>
  )
}
export default HomeDialogMobile
